<script setup>
import { reactive, ref, watch } from "vue";
import axios from "axios";
defineProps({
  msg: String,
});

const userList = ref(null);

// const getUserList = async () => {
//   const res = await axios.get("/api/user/getUser");
//   userList.value = res.data.data;
// };
// getUserList();

// watch(userList, (val) => {
//   // console.log(val);
// });

const pageNum = ref(1);
const handleChangePage = (type) => {
  if (type === "prev") {
    pageNum.value = pageNum.value - 1;
  } else {
    pageNum.value = pageNum.value + 1;
  }
  console.log("change page", type, pageNum.value);
};

const userInfo = reactive({
  userName: "",
  userEmail: "",
});
const handleAdd = () => {
  console.log("add", userInfo.userName, userInfo.userEmail);
  axios
    .post("/agi/user/add", {
      userName: userInfo.userName,
      userEmail: userInfo.userEmail,
    })
    .then((res) => {
      console.log(res);
    });
};
const handleSelect = () => {
  axios.get("/agi/user/getUser").then((res) => {
    console.log(res);
  });
};

const handleDelete = () => {
  axios.post("/agi/user/remove").then((res) => {
    console.log(res);
  });
};

const handleEdit = () => {
  axios.post("/agi/user/edit").then((res) => {
    console.log(res);
  });
};

const handleAll = () => {
  axios.get("/agi/user/all").then((res) => {
    console.log(res);
  });
};
</script>

<template>
  <h1>{{ msg }}</h1>

  <div>
    <input type="text" v-model="userInfo.userName" />
    <input type="text" v-model="userInfo.userEmail" />
    <button type="button" @click="handleAdd">添加数据</button>
    <button type="button" @click="handleSelect">查询数据</button>
    <button type="button" @click="handleDelete">删除数据</button>
    <button type="button" @click="handleEdit">编辑数据</button>
    <button type="button" @click="handleAll">获取所有数据</button>
  </div>
  <!-- <div class="demo-wrapper">
    <ul v-if="!!userList">
      <li
        v-for="(item, index) in userList.list"
        :key="item.id"
        :data-index="index"
        style="text-align: left; margin: 10px 0"
      >
        <div>
          <span>{{ item.userName }}</span>
          <span>{{ item.userEamil }}</span>
        </div>

        <div>
          <button>删除</button>
          <button>编辑</button>
        </div>
      </li>
    </ul>
    <div class="pagetion">
      <button @click="handleChangePage('prev')">上一页</button>
      <button @click="handleChangePage('next')">下一页</button>
    </div>
  </div> -->
</template>

<style scoped>
.demo-wrapper {
  width: 500px;
  position: relative;
  margin: 0 auto;
}
ul {
  list-style: none;
}
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

li span {
  margin-right: 10px;
}
li button {
  margin: 5px 10px;
}
</style>
